<template>
  <div class="login-container">
    <!-- <div class="login-container-title">
      <img src="../../assets/login/loginTitle.png" alt="">
    </div> -->
    <div class="login-container-center">
      <div class="title">水产养殖水质诊疗系统</div>
      <div class="formBox">
        <div class="innerTitle">欢迎登录</div>
        <el-form
          v-show="isForget"
          ref="pwdForm"
          :model="pwdForm"
          :rules="pwdRules"
          class="login-form"
          auto-complete="on"
          style="top: 18%"
        >
          <div class="login-form-title">找回密码</div>
          <div class="interval" />
          <el-form-item prop="account">
            <el-input
              v-model="pwdForm.account"
              type="text"
              auto-complete="off"
              placeholder="请输入账号名、手机、邮箱"
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              v-model="pwdForm.code"
              auto-complete="off"
              placeholder="请输入验证码"
              style="width: 63%"
            />
            <div class="login-code">
              <img :src="codeUrl" class="login-code-img" @click="getCode" />
            </div>
          </el-form-item>
          <el-form-item prop="mail_code">
            <el-input
              v-model="pwdForm.mail_code"
              auto-complete="off"
              placeholder="请输入邮件验证码"
              style="width: 63%"
              :disabled="!pwdForm.account || !pwdForm.code"
              @keyup.enter.native="handleRestPwd"
            />
            <div class="login-code">
              <el-button
                size="medium"
                type="primary"
                style="width: 100%"
                :disabled="!pwdForm.account || !pwdForm.code"
                @click.native.prevent="handleGetCode"
              >
                <span>获取验证码</span>
              </el-button>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="pwdForm.password"
              type="password"
              auto-complete="off"
              placeholder="请输入新密码"
              @keyup.enter.native="handleRestPwd"
            />
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input
              v-model="pwdForm.checkPass"
              type="password"
              auto-complete="off"
              placeholder="请再次输入新密码"
              @keyup.enter.native="handleRestPwd"
            />
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleRestPwd"
            >
              <span v-if="!loading">确 认</span>
              <span v-else>确 认 中...</span>
            </el-button>
          </el-form-item>
          <div class="pwd"><span @click="handleForgetPwd">去登录</span></div>
        </el-form>

        <el-form
          v-show="!isForget"
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="on"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="loginForm.userName"
              type="text"
              auto-complete="off"
              placeholder="请输入用户名"
            >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="请输入密码"
              @keyup.enter.native="handleLogin"
            >
              <i slot="prefix" class="el-input__icon el-icon-unlock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div class="codeBox">
              <el-input
                v-model="loginForm.code"
                auto-complete="off"
                placeholder="请输入验证码"
                style="width: 55%"
                @keyup.enter.native="handleLogin"
              >
                <img
                  slot="prefix"
                  src="@/assets/login/codeIcon.png"
                  alt=""
                  style="width: 22px; margin-top: 9px"
                />
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" class="login-code-img" />
              </div>
              <div>
                <i
                  class="el-input__icon el-icon-refresh"
                  @click="getCode"
                  style="cursor: pointer"
                ></i>
              </div>
            </div>
          </el-form-item>
          <div class="pwd">
            <span @click="registerVisible = true">未注册?</span>
          </div>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%; background-color: #00b8ff !important"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-form>

        <el-dialog :visible.sync="registerVisible" width="25%"> 
          <div slot="title" class="custom-dialog-title">欢迎注册</div>
          <el-form ref="registerForm" :model="registerForm" label-width="120px">
            <el-form-item label="用户名">
              <el-input
                v-model="registerForm.accountNo"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="registerForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input
                v-model="registerForm.userName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="registerForm.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄">
              <el-slider
                v-model="registerForm.age"
                :min="18"
                :max="80"
                show-input
              ></el-slider>
            </el-form-item>
            <el-form-item label="养殖面积(亩)">
              <el-input
                v-model="registerForm.area"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register">注册</el-button>
              <el-button @click="registerVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken, setToken, removeToken } from "@/utils/auth";
import { getCodeImg, sendMailCode, forgotPassword, register } from "@/api/user";
import { login, logout, getInfo } from "@/api/user";
import Cookies from "js-cookie";

export default {
  name: "Login",
  data() {
    var validateCheckPass = (rule, value, callback) => {
      if (value !== this.pwdForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        userName: "",
        password: "",
        codeId: "",
        code: "",
      },
      registerForm: {
        userName: "",
        password: "",
        codeId: "",
        code: "",
      },
      registerVisible: false,
      loginRules: {
        userName: [
          {
            required: true,
            trigger: "blur",
            message: "账号不能为空",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "密码不能为空",
          },
        ],
        code: [
          {
            required: true,
            // trigger: "change",
            message: "验证码不能为空",
          },
        ],
      },
      loading: false,
      codeUrl: "",
      redirect: undefined,
      isForget: false,
      pwdForm: {
        account: "",
        password: "",
        codeId: "",
        code: "",
        checkPass: "",
        mail_code: "",
      },
      pwdRules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: "账号不能为空",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "新密码不能为空",
          },
          {
            pattern:
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/,
            message: "密码不少于8位，包含大小写字母、数字、特殊字符至少三种",
          },
        ],
        code: [
          {
            required: true,
            trigger: "change",
            message: "验证码不能为空",
          },
        ],
        mail_code: [
          {
            required: true,
            trigger: "change",
            message: "邮件验证码不能为空",
          },
        ],
        checkPass: [
          {
            required: true,
            trigger: "blur",
            message: "请再次输入新密码",
          },
          { validator: validateCheckPass, trigger: "blur" },
        ],
        redirect: undefined,
      },
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  mounted() {
    this.getCode();
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        console.log(res);
        this.codeUrl = "data:image/gif;base64," + res.data.imgBase64;
        if (this.isForget) {
          this.pwdForm.code = "";
          this.pwdForm.codeId = res.data.codeId;
        } else {
          this.loginForm.code = "";
          this.loginForm.codeId = res.data.codeId;
        }
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          login(this.loginForm)
            .then((res) => {
              if (res.status == 200) {
                setToken(res.data.token);
                localStorage.setItem("account", res.data.accountNo);
                localStorage.setItem("id", res.data.id);
                this.$router.push({ path: this.redirect || "/" });
              } else {
                this.$message.error({
                  message: res.msg,
                  duration: 5000,
                });
                this.getCode();
              }
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });
        } else {
          this.getCode();
          console.log("error submit!!");
          return false;
        }
      });
    },
    register() {
      // 注册逻辑
      register(this.registerForm).then((res) => {
        if (res) {
          this.$message.success("注册成功");
          this.registerVisible = false;
        } else {
          this.$message.error("注册失败");
        }
      });
    },
    handleForgetPwd() {
      this.isForget = !this.isForget;
      if (this.$refs.pwdForm) {
        this.$refs.pwdForm.resetFields();
      }
      if (this.$refs.loginForm) {
        this.$refs.loginForm.resetFields();
      }
      this.getCode();
      this.loading = false;
    },
    handleGetCode() {
      const { account, codeId, code } = this.pwdForm;
      sendMailCode(account, "mail", codeId, code).then(() => {
        this.$message.success("邮件验证码发送成功");
      });
    },
    handleRestPwd() {
      this.$refs.pwdForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          const { code, mail_code, checkPass, ...data } = this.pwdForm;
          data.code = mail_code;
          forgotPassword(data)
            .then((res) => {
              this.$message.success(res.msg);
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.login-container {
  .el-input__inner {
    background-color: #ffffff !important;
    color: #333 !important;
  }
}
</style>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  width: 100%;
  min-height: 720px;
  overflow: hidden;
  background: url("../../assets/login/bg.png") center no-repeat;
  background-size: 1920px 100%;
  display: flex;
  padding-top: 10%;
  justify-content: center;

  .login-container-center {
    .title {
      font-size: 40px;
      font-weight: bold;
      color: #ffffff;
      padding-bottom: 60px;
      text-align: center;
    }
  }

  .custom-dialog-title {
    font-size: 30px;
    color: #0073ff;
    text-align: center;
  }
  .formBox {
    padding: 50px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    .innerTitle {
      font-size: 30px;
      color: #0073ff;
      padding-bottom: 30px;
      text-align: center;
    }
    .el-input__icon {
      color: #333;
      font-weight: 600;
      font-size: 20px;
    }
  }
  .login-form {
    overflow: hidden;

    .interval {
      background-color: #effaff;
      width: 100%;
      height: 4px;
      margin-top: 5px;
      margin-bottom: 22px;
    }
    .codeBox {
      display: flex;
      justify-content: space-between;
    }
    .login-code {
      width: 115px;
      height: 40px;

      img {
        vertical-align: middle;
        height: 40px;
        width: 115px;
      }
    }
    .el-button--primary {
      // background-color: #3c63d7;
      // border-color: #3c63d7;
    }
    .pwd {
      width: 100%;
      text-align: right;
      font-size: 15px;
      color: #409eff;
      margin-top: -8px;
      margin-bottom: 10px;
      span {
        cursor: pointer;
      }
    }
  }
}
</style>
